<template>
  <view>
    <view style="position: fixed;width: 100%;left: 0;top:0;z-index:999">
      <kt-nav-bar
          title="Clock Detail"
      ></kt-nav-bar>
    </view>
    <view>
      <kt-nav-bar
          title="Clock Detail"
      ></kt-nav-bar>
    </view>
    <view
        class="in-box"
    >

      <u-row>
        <u-col :span="1">
          <image
              v-if="item.type===1"
              :src="$kt.file.byPath('image/into.svg')"
              mode="aspectFill"
              class="clock-type-img"
          ></image>
          <image
              v-if="item.type===2"
              :src="$kt.file.byPath('image/out.svg')"
              mode="aspectFill"
              class="clock-type-img"
          ></image>
        </u-col>
        <u-col :span=".2"></u-col>
        <u-col :span="10">
          <view class="clock-type-view">
            <text v-if="item.type === 1">{{ "Clock In" }}</text>
            <text v-else>{{ "Clock Out" }}</text>
          </view>
          <view style="height: 10rpx"></view>

          <view class="time-text">
            {{ $kt.date.format(item.gmtClock, 'yyyy-MM-dd hh:mm:ss') }}
          </view>
        </u-col>
      </u-row>


    </view>

    <view
        v-if="userSelf.workTime&&userSelf.offWorkTime&&item.type===2"
        class="in-box in-box-2">
      <view>
        <!-- 是否迟到 -->
        <view class="title">
          {{ "Late" }}
          <text style="font-size: 28rpx;margin-left: 20rpx">
            {{userSelf.workTime}} - {{userSelf.offWorkTime}}<text
              v-if="userSelf.isNextDayOffWork"
              style="font-size: 22rpx;">(Next day)</text>
          </text>
        </view>
        <view class="text">
          <view>{{ "YES" }}</view>
        </view>
      </view>
    </view>

    <view style="height: 10rpx;background-color: rgba(118,118,118,.1)"></view>

    <view
        class="in-box in-box-2">
      <view>
        <view class="title">{{ "IP" }}</view>
        <view class="text">
          <view>{{ item.ip }}</view>
        </view>
      </view>
    </view>
    <view style="height: 10rpx;background-color: rgba(118,118,118,.1)"></view>

    <view
        class="in-box in-box-2">
      <!-- 是否为补卡 -->
      <view>
        <view class="title">{{ "Reissue" }}</view>
        <view class="text">
          <view v-if="item.isReissue">{{ "Yes" }}</view>
          <view v-else>{{ "No" }}</view>
        </view>
      </view>
    </view>

    <view
        style="height: 10rpx;background-color: rgba(118,118,118,.1)"></view>

    <view
        class="in-box in-box-2" style="padding:0 40rpx">
      <view style="height: 30rpx"></view>
      <view
      v-if="false"
      >
        <kt-button
        :is-open-box-shadow="false"
        >
          <!-- 发送到邮箱 -->
          {{ "Send to email" }}
        </kt-button>
      </view>
      <view style="height: 30rpx"></view>

      <!-- 是否为补卡 -->
      <view>
        <!-- 如有疑问，请联系管理员" -->
        <view
        style="font-size: 28rpx;color: #666666;font-weight: lighter;">
          {{ "If you have any doubts, please contact the administrator." }}
        </view>
        <view style="height: 20rpx"></view>
        <view
            v-if="false"
            style="text-align: right">
          <view
              class="btn-que"
          >{{ "Feedback" }}</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      id:null,
      userSelf:{
      },
      item:{
        type: 1,
        gmtClock: new Date().getTime()
      }
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.getById();
  },
  created() {
    // 设置标题
    uni.setNavigationBarTitle({
      title: "Clock Detail"
    });
    this.userSelf = this.$kt.userAccount.getSelf();
  },
  methods:{
    getById(){
      // /business-erp-web/empClock/getById
      this.$kt.request.send({
        uri: '/business-erp-web/empClock/getById',
        data: {
          id: this.id
        },
        stateSuccess: res => {
          this.item = res.data;
        },
        stateFail: err => {
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.in-box {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin: 30rpx 0;
}

.time-text {
  font-size: 28rpx;
  color: #666666;
}

.clock-type-view {
}

.tag {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: #000000;
  color: #fef0f0;
  margin-bottom: 10rpx;
  font-size: 24rpx;
}

.more-view {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  margin-top: 40rpx;
  color: #000000;
}

.more-btn:active {
  opacity: .5;
}

.no-data-img {
  width: 200rpx;
  height: 300rpx;
}

.no-data-view {
  width: 100%;
  text-align: center
}

.clock-type-img{
  width: 50rpx;
  height: 50rpx;
}

.in-box-2{
  padding-top: 0;
  border: none;
}
.title{
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.btn-que{
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  border: 1rpx solid #cccccc;
  color: #666666;
  font-size: 24rpx;
}

.btn-que:active{
  opacity: .5;
}
</style>
